<template>
  <ws-table-el ref="table" v-bind="tableConfig">
    <template #search>
      <search-group>
        <label for>问题名称：</label>
        <el-input v-model.trim="searchOptions.appType" placeholder="请输入问题名称" clearable></el-input>
      </search-group>
      <search-group>
        <label for>创建时间：</label>
        <ws-date-range
          :startTime.sync="searchOptions.createTimeStart"
          :picker-options="pickerOptions"
          :endTime.sync="searchOptions.createTimeEnd"
        ></ws-date-range>
      </search-group>
      <search-group>
        <label for>创建人手机号：</label>
        <el-input
          v-model.trim="searchOptions.phone"
          placeholder="请输入创建人手机号"
          clearable
          @input="changeUid(searchOptions.phone, 'phone')"
        ></el-input>
      </search-group>
      <search-group>
        <label for>创建人ID：</label>
        <el-input v-model.trim="searchOptions.appType" placeholder="请输入创建人ID" clearable></el-input>
      </search-group>
      <search-group>
        <label for>创建人昵称：</label>
        <el-input v-model.trim="searchOptions.appType" placeholder="请输入创建人昵称" clearable></el-input>
      </search-group>
    </template>
    <template #searchBtns>
      <el-button-group>
        <ws-enter-event>
          <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
        </ws-enter-event>
        <ws-throttle>
          <el-button
            type="primary"
            class="table-column-header-button"
            @click="reset"
            icon="el-icon-refresh-left"
          ></el-button>
        </ws-throttle>
      </el-button-group>
      <el-button class="add" @click="downLoad" plain>导出</el-button>
    </template>
    <template>
      <ws-table-column-el prop="createUser" label="问题ID"></ws-table-column-el>
      <ws-table-column-el prop="appType" label="问题名称" width="150px"></ws-table-column-el>
      <ws-table-column-el prop="appType1" label="创建人ID" width="150px"></ws-table-column-el>
      <ws-table-column-el prop="createUser1" label="创建人手机号"></ws-table-column-el>
      <ws-table-column-el prop="status" label="状态" width="150px">创建人昵称</ws-table-column-el>
      <ws-table-column-el prop="createTime" label="创建时间"></ws-table-column-el>
    </template>
  </ws-table-el>
</template>
<script>
export default {
  name: 'templateManage',
  data() {
    return {
      moduleName: '/customerServiceSystem/templateManage',
      statusOptions: [
        { id: 1, value: '启用' },
        { id: 2, value: '停用' }
      ],
      appTypeOptions: [
        { id: 0, value: 'app' },
        { id: 1, value: '小程序' }
      ],
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.minDate = minDate
          this.maxDate = maxDate
        }
      },
      searchOptions: {
        phone: null,
        appType: null,
        status: ''
      },
      selectColIds: [],
      tableConfig: {
        emptyModel: true,
        indexColumn: true,
        loading: true,
        // multi: true,
        data: [
          {
            createUser: '1212',
            appType: '1',
            appType1: '1',
            createUser1: 'shshsssss',
            status: 2,
            createTime: '2022-12-21'
          }
        ],
        lazyQuery: {
          // moduleName: '/customerServiceSystem/templateManage',
          op: {
            selectList: 'list',
            selectCount: 'count'
          },
          beforeQuery: this.beforeQuery
        }
      }
    }
  },
  mounted() {},
  methods: {
    search() {
      this.$refs.table.search()
    },
    changeUid(val, type) {
      this.searchOptions[type] = val.replace(/^(-1+)|[^\d]+/g, '')
    },
    downLoad() {
      let opt = {
        data: {
          body: this.searchOptions
        },
        op: 'export'
      }
      this.$axios(this.$getModuleUrl(this.moduleName, opt.op), opt).then((res) => {
        this.$message.success('文件正在生成，请稍后到文件下载界面进行下载')
      })
    },
    beforeQuery() {},
    reset() {
      this.$refs.table.reset()
    }
  }
}
</script>
<style lang="scss" scoped>
.add {
  margin: 0px 20px;
}
.disable-dropdown {
  cursor: not-allowed !important;
  pointer-events: auto;
}
</style>
